<template>
    <div class="main">
        <el-form :model="goods" ref="ruleFormRef" :rules="rules" label-width="auto" label-position="top">
            <div class="card-total">
                <!-- 上传商品主图 -->
                <div class="card1 card">
                    <el-card>
                        <el-form-item prop="file">
                            <template #label>
                                <span style="font-size: large; color: black;">1.上传商品主图</span>
                                <span style="color:#999;font-size: 13px;line-height: 20px;">&nbsp;&nbsp;请上传宝贝高清正面图，最好是白底图片</span>
                            </template>
                            <el-upload 
                            v-model="goods.file"
                            class="upload-img" 
                            list-type="picture-card" 
                            :limit="1" 
                            :on-preview="handlePreview"
                            :on-change="uploadFile" 
                            :on-remove="removeFile" 
                            :auto-upload="false"
                            ref="upFileRef">
                                <uploadImg width="30"></uploadImg>
                            </el-upload>
                        </el-form-item>
                    </el-card>
                </div>

                <!-- 确定商品类别 -->
                <div class="card2 card">
                    <el-card>
                        <el-form-item prop="totaltype">
                            <template #label>
                                <span style="font-size: large; color: black;">2.确定商品类别</span>
                                <span style="color:#999;font-size: 13px;line-height: 20px;">&nbsp;&nbsp;请确认或修改商品类目</span>
                            </template>
                            <div class="shop_type">  
                                <span style="color: rgb(168, 171, 178); margin-left: 10px; width: 100px;">商品分类</span>  
                                <el-cascader 
                                    placeholder="您可以尝试输入商品的类别"
                                    :options="categories"
                                    :props="props"
                                    filterable
                                    v-model="goods.categoryId"
                                    style="width: 260px;"
                                    />
                            </div>
                
                        </el-form-item>
                    </el-card>
                </div>

                <div class="card3 card">
                    <el-card>
                        <el-form-item prop="name">
                            <template #label><span style="font-size: large; color: black;">3.添加商品名称</span>
                                <span style="color:#999;font-size: 13px;line-height: 20px;">&nbsp;&nbsp;请输入商品名称,注意是正规注册名</span>
                            </template>
                            <el-input v-model="goods.name" placeholder="请输入商品的名称" style="width: 66.7%;"> </el-input>
                        </el-form-item>
                    </el-card>
                </div>

                <div class="card4 card">
                    <el-card>
                        <el-form-item prop="count">
                            <template #label><span style="font-size: large; color: black;">4.添加商品库存</span>
                                <span style="color:#999;font-size: 13px;line-height: 20px;">&nbsp;&nbsp;请上传当前商品的库存量</span>
                            </template>
                            <el-input v-model="goods.count" type="number" min="0" placeholder="请输入库存量" style="width: 66.7%;"> </el-input>
                        </el-form-item>
                    </el-card>
                </div>

                <div class="card5 card">
                    <el-card>
                        <el-form-item prop="description">
                            <template #label><span style="font-size: large; color: black;">5.添加商品描述</span>
                                <span style="color:#999;font-size: 13px;line-height: 20px;">&nbsp;&nbsp;请上传当前商品的详细描述，展示商品特色</span>
                            </template>
                            <el-input type="textarea" autosize v-model="goods.description" placeholder="请输入商品描述" style="width: 66.7%;"> </el-input>
                        </el-form-item>
                    </el-card>
                </div>

                <div class="card6 card">
                    <el-card>
                        <el-form-item prop="price">
                            <template #label><span style="font-size: large; color: black;">6.添加商品单价</span>
                                <span style="color:#999;font-size: 13px;line-height: 20px;">&nbsp;&nbsp;请上传当前商品的单价,价格要符合市场管理规范</span>
                            </template>
                            <el-input v-model="goods.price" type="number" min="0" placeholder="请输入商品单价" style="width: 66.7%;"> </el-input>
                        </el-form-item>
                    </el-card>
                </div>

                <el-dialog  v-model="previewVisible" width="50%">
                    <el-image :src="previewImage" fit="cover" class="preview-image" ></el-image>
                </el-dialog>
            </div>
        </el-form>
        <div class="bottom-bar" v-if="showBottomBar">
            <div class="selected-info">
                <span class="info-item"><span style="color: rgba(33, 32, 32, 0.582);">已选类别:</span> <span style="font-size: large;">{{ getGoodsNamesByCategoryId(goods.categoryId[0],goods.categoryId[1]) }}</span></span>
                <span class="info-item"><span style="color: rgba(33, 32, 32, 0.582);">商品名称: </span><span style="color:blue;font-size: large;">{{ goods.name }}</span></span>
                <span class="info-item"><span style="color: rgba(33, 32, 32, 0.582);">库存: </span><span style="color: crimson;font-size: large;">{{ goods.count }}</span></span>
                <span class="info-item"><span style="color: rgba(33, 32, 32, 0.582);">单价: </span><span style="color: crimson;font-size: large;">{{ goods.price }}</span></span>
            </div>
            <el-button type="primary" @click="onSubmit" v-if="canSubmit">确认提交</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import uploadImg from '@/components/iconBywzy/uploadImg.vue';
import { Path } from "@/constant/index"
import { get,post } from '@/plugins/axios';
const upFileRef = ref(null)
const goods = reactive({
    file: null,
    name: '',
    count: '',
    price: '',
    description: '',
    categoryId: '',
});

function validateCount(rule, value, callback) {
    if (value <= 0) {
        callback(new Error('库存量必须大于零'));
    } else {
        callback();
    }
}

function validatePrice(rule, value, callback) {
    if (!isNaN(value) && !isNaN(parseFloat(value)) && parseFloat(value) > 0) {
        callback();
    } else {
        callback(new Error('价格必须是有效数字!'));
    }
}

const ruleFormRef = ref();
const rules = reactive({
    file: [{ required: true, message: '请上传商品主图', trigger: 'blur' }],
    count: [{ required: true, message: '请输入库存数量', trigger: 'blur' }, { validator: validateCount, trigger: 'blur' }],
    name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
    description: [{ required: true, message: '请输入商品详细描述', trigger: 'blur' }],
    price: [{ required: true, message: '请输入商品单价', trigger: 'blur' }, { validator: validatePrice, trigger: 'blur' }]
});

// 分类部分
const categories = ref([])
getGoodsType()
const props = {
  multiple: false,
//   emitPath: false,
  label: 'name',
  value: 'id',
  children: 'children',
  expandTrigger: 'click'
}
// 获取数据
function getGoodsType(){
  get(Path.categoryList,null,content => {
    categories.value = content
  })
}
  
function getGoodsNamesByCategoryId(Pid,Sid){
  let name = ''
  categories.value.forEach( category => {
    if(category.id === Pid){
        name += category.name 
        name += "/"
        category.children.forEach( categoryson => {
        if( categoryson.id === Sid){
            name += categoryson.name
            return
        }
    } )
    }
  })  
  return name
}

const previewImage = ref('');
const previewVisible = ref(false);

const showBottomBar = computed(() => {
    return  goods.name || goods.count  || goods.description || goods.price ;
});

const canSubmit = computed(() => {
    if(goods.categoryId !== null){
        return goods.file&&goods.price&&goods.name&&goods.count&&goods.description;
    }
    return false
});


const onSubmit = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            post(Path.addGoods,{
                file: goods.file,
                categoryId: goods.categoryId[1],
                name: goods.name,
                count: goods.count,
                description: goods.description,
                price: goods.price
            },content => {
                if(content){
                 upFileRef.value.clearFiles()
                 clearForm()
                }
            })
        } else {
            ElMessage.error('请完整填写必填信息！');
            return false;
        }
    });
};
function uploadFile(file) {
  goods.file = file.raw
}
function removeFile(){
  goods.file = null
}
const handlePreview = (file)=>{
    previewImage.value = file.url
    previewVisible.value=true
}

function clearForm(){
    goods.file = null,
    goods.count = '',
    goods.description = '',
    goods.categoryId = '',
    goods.name = '',
    goods.price = ''
}
</script>

<style scoped lang="scss">
.main {
    display: flex;
    height: auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
}

:deep(.el-form) {
    width: 70%;
    height: 100%;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 120px;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 120px; /* 调小图片上传框的大小 */
     /* 离左端有一定距离 */
}

::v-deep .el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
}

::v-deep .el-input__wrapper:hover {
    background-color: #ffffff;
    border-color: #409eff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

::v-deep .el-upload-list__item {
    width: 120px !important; /* 调整上传后图片的大小 */
    height: 120px !important; /* 调整上传后图片的大小 */
}

::v-deep .el-upload-list__item-thumbnail {
    width: 100% !important; /* 确保缩略图占满容器 */
    height: 100% !important; /* 确保缩略图占满容器 */
}

.card-total {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card {
    margin-bottom: 10px; /* 调整卡片之间的距离 */
}

.card1 {
    flex: 1;
    padding-top: 3%;
}

.card2 {
    flex: 1;
}

.card3 {
    flex: 1;
}

.category-form {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.category-menu {
    border: 1px solid #ebeef5;
    height: 300px;
    overflow-y: auto;
    border-radius: 5px;
    margin: 10px 0;
    transition: all 0.3s ease;
}

.category-menu .el-menu-item {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.category-menu .el-menu-item:hover {
    background-color: #f0f9ff;
    color: #409eff;
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.selected-info {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.info-item {
    padding-left: 50px;
    font-size: 16px;
    color: #333;
}
.shop_type{
    margin-left: 0%; 
    background-color: #f2f4f7;
    display: flex;
    align-items: center; 
    text-align: center;
    border: 1px solid #dcdfe6; 
    border-radius: 8px;;
}
.shop_type:hover{
    background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

</style>